import React, { Component } from 'react';
import { CheckCircleTwoTone } from '@ant-design/icons';
import { Rate } from 'antd-mobile';

import api from '@/api/testapi'

import  './Evaluation.scss'
import  '@/static/style.css'
import dateFormat from 'dateformat'

class Evaluation extends Component {
    constructor(props) {
        super(props);

        this.state = {
            selectType:-1,
            onlyContent:false,
            ratings:[]
        }
    }
    //只显示有内容的评价
    onlyShowContent = (e)=>{

        this.setState({
            onlyContent:!this.state.onlyContent
        })
    }
    componentDidMount(){
        api.getRating().then(res=>{
            this.setState({
                ratings:res.result.ratings
            })
        })
    }

    filterRatings(){
        let filterRatings = this.state.ratings
        if(this.state.selectType != -1){
            filterRatings = filterRatings.filter(el=>el.rateType == this.state.selectType)
        }
        if(this.state.onlyContent){
            filterRatings = filterRatings.filter(el=>el.text)
        }
        return filterRatings
    }
    
    changeType(type){
        this.setState({
            selectType:type
        })
    }

    render() { 
        return (
            <div className="Evaluation">
                <div className="eva">
                    <div className="score">
                        <div className="sc">{this.props.sellerData.score}</div>
                        <div className="text">综合评分</div>
                        <div className="rate">高于周边商家{this.props.sellerData.rankRate}%</div>
                    </div>
                    <div className="star-block">
                        <div className='star'>
                            <div className="key">服务态度</div>
                            <div className="value">
                                <Rate className="star-style" readOnly defaultValue={this.props.sellerData.serviceScore} />
                                <span className="star-score">{this.props.sellerData.serviceScore}</span>
                            </div>
                        </div>
                        <div className='star'>
                            <div className="key">食品味道</div>
                            <div className="value">
                                <Rate className="star-style" readOnly defaultValue={this.props.sellerData.foodScore} />
                                <span className="star-score">{this.props.sellerData.foodScore}</span>
                            </div>
                        </div>
                        <div className='star'>
                            <div className="key">送达时间</div>
                            <div className="value">
                                <span className="time">{this.props.sellerData.deliveryTime}分钟</span>
                            </div>
                        </div>
                    </div>
                </div>
                {/* 这块没样式标注 只能随便写了  */}
                <div className="rates">
                    <div className="rate-control">
                        <div className="rate-select">
                            <div className={`block block-like ${this.state.selectType == -1?'block-checked':''}`}  onClick={()=>{this.changeType(-1)}}><span className="text">全部</span><span className="count">{this.state.ratings.length}</span></div>
                            <div className={`block block-like ${this.state.selectType == 0?'block-checked':''}`} onClick={()=>{this.changeType(0)}}><span className="text">满意</span><span className="count">{this.state.ratings.filter(el=>el.rateType == 0).length}</span></div>
                            <div className={`block block-unlike ${this.state.selectType == 1?'block-checked':''}`} onClick={()=>{this.changeType(1)}}><span className="text">不满意</span><span className="count">{this.state.ratings.filter(el=>el.rateType == 1).length}</span></div>
                        </div>
                        <div className="rate-alltext"> 
                            <CheckCircleTwoTone className="icon" onClick={(e)=>{this.onlyShowContent(e,true)}} twoToneColor={this.state.onlyContent?'#52c41a':'#E9EBEC'} />
                            只显示有内容的评价
                        </div>
                    </div>
                </div>
                <div className="rate-list">
                    {this.filterRatings().map((el,index)=>{
                        return(
                            <div className="rate-list-item" key={index}>
                                <div className="headimage">
                                <img
                                    className="img"
                                    src={el.avatar}
                                />
                                </div>
                                <div className="rate-info">
                                    <div className="head">
                                        <span className="name">{el.username}</span>
                                        
                                        <span className="time">{dateFormat(new Date(el.rateTime),'yyyy-MM-dd hh:mm')}</span>
                                    </div>
                                    <div className="rate-block">
                                        <Rate className="star" readOnly defaultValue={el.score} />
                                        <span className="text">{el.deliveryTime}分钟送达</span>
                                    </div>
                                    <div className="rate-desc">{el.text}</div>
                                    {
                                        el.recommend.length?
                                        <div className="good-foods" >
                                            <span className="up icon-thumb_up"></span>
                                            <div className="good-block-list">
                                                {
                                                    el.recommend.map((el,index)=>{
                                                        return (
                                                            <div className="good-block-item" key={index}>{el}</div>
                                                        )
                                                    })
                                                }
                                            </div>
                                        </div>:''
                                    }
                                    
                                </div>
                            </div>
                        )
                    })}
                </div>
            </div>
        );
    }
}
 
export default Evaluation;